 <template>
  <PageWrapper contentFullHeight fixedHeight>
    <VxeBasicTable class="w-full h-full" ref="tableRef" v-bind="gridOptions">
      <template #action="{ row }">
        <a-space>
          <a-tooltip placement="bottom">
            <template #title>
              <span>查看详情</span>
            </template>
            <a-button type="link" size="small" @click="handleClickView(row)">
              <template #icon><Icon icon="carbon:view" /></template>
            </a-button>
          </a-tooltip>
          <a-tooltip placement="bottom"  v-if="hasEditPermission(row)">
            <template #title>
              <span>编辑人员</span>
            </template>
            <a-button type="link" size="small" @click="handleEdit(row)">
              <template #icon><Icon icon="clarity:note-edit-line" /></template>
            </a-button>
          </a-tooltip>
          <a-tooltip placement="bottom"  v-if="hasEditPermission(row)">
            <template #title>
              <span>删除此人员</span>
            </template>
            <a-button type="link" danger size="small">
              <template #icon>
                <a-popconfirm placement="left" title="是否确认删除？" ok-text="确定" cancel-text="取消" @confirm="handleDelete(row)">
                  <Icon icon="ant-design:delete-outlined" />
                </a-popconfirm>
              </template>
            </a-button>
          </a-tooltip>
        </a-space>
      </template>
    </VxeBasicTable>
    <StationDrawer @register="registerDrawer" @success="reloadTableData" />
    <StationDetailsModal @register="registerDetailsModal" />
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { message } from "ant-design-vue";
  import { Icon } from '@gui-pkg/components';
  import { PageWrapper, useDrawer, useModal } from '@gui-pkg/antdcomponents';
  import { BasicTableProps, VxeBasicTable, VxeGridInstance } from '@gui-pkg/antdcomponents';
  import StationDrawer from './StationDrawer';
  import { columns, searchFormSchema } from './station.data';
  import { getPersonnelList, deletePersonnelData } from '@/api/information/personnel';
  import StationDetailsModal from './DetailsModal';

  defineOptions({ name: 'PersonnelList' });

  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerDetailsModal, { openModal: openDetailsModal }] = useModal();
  const tableRef = ref<VxeGridInstance>();
  const gridOptions = reactive<BasicTableProps>({
    id: tableRef.value,
    keepSource: true,
    columns: columns,
    toolbarConfig: {
      className: "vxe-toolbarConfig",
      buttons: [
        {
          content: '新增',
          buttonRender: {
            name: 'AButton',
            props: {
              type: 'primary',
              preIcon: 'grommet-icons:add',
            },
            events: {
              click: () => handleCreate(),
            },
          },
        },
      ],
    },
    formConfig: {
      enabled: true,
      className: "vxe-formConfig",
      items: searchFormSchema,
    },
    height: 'auto',
    proxyConfig: {
      seq: true,
      props: {
        result: 'records',
        total: 'total'
      },
      ajax: {
        query: async ({ page, form }) => {
          const tableListData = await getPersonnelList({
            pageNum: page.currentPage,
            pageSize: page.pageSize,
            ...form,
          });
          return tableListData;
        },
      },
    },
  });


  const LOGIN_USER_INFO_KEY: any = window.localStorage.getItem('LOGIN_USER_INFO_KEY');
  const userData = JSON.parse(LOGIN_USER_INFO_KEY);
  // 同步的权限检查函数
  const hasEditPermission = (row) => {
    if (!userData || !userData.roles || !userData.deptName) {
      return false;
    }
    const isAdmin = userData.roles.includes("admin") || userData.roles.includes("city_role");
    if(isAdmin){
      return true;
    }

    if (!row || !row.town) {
      return false;
    }
    const isDeptMatch = userData.deptName === row.town;
    return   isDeptMatch;
  };

  function handleCreate() {
    openDrawer(true, {
      isUpdate: false,
    });
  }

  // 查看详情
  const handleClickView = (row) => {
    openDetailsModal(true, {
      record: row,
    });
  }

  // 编辑人员资料
  function handleEdit(row) {
    openDrawer(true, {
      record: row,
      isUpdate: true,
    });
  }
  // 删除此人员
  const handleDelete = async (row) => {
    await deletePersonnelData(row.id);
    message.success("删除成功！");
    reloadTableData();
  }

  // 重新请求菜单表格数据
  const reloadTableData = async () => {
    const tableListData = await getPersonnelList({pageNum: 1, pageSize: 20 });
    tableRef.value.loadData(tableListData.records);
  };
</script>
